<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix header">
      <span>{{post.id}}.{{post.questiontitle}}</span>
      <!-- <span>选项  数量 占比</span> -->
    </div>
    <div class="title">
      <span>选项</span>
      <span>数量</span>
      <span>占比</span>
    </div>
    <div v-for="(o,index) in post.answers" :key="index" class="text item" :id='index'>
      <div class="title">
        <span>{{o.option}} {{o.text}}</span>
        <span>{{o.quantity}}</span>
        <span class="baifenbi">{{o.quantity/post.totalquantity}}</span>
      </div>
    </div>
    <div class="buttons">
      <el-button @click="showp1(post.id - 1)">统计图</el-button>
      <el-button @click="showp2(post.id - 1)">统计表</el-button>
    </div>
    <div class="picture p1">
      <MyChart :class="post.id+1" v-bind:datas="this.datas" v-bind:outerid="post.id +1" v-bind:K="post.id"></MyChart>
    </div>
    <div class="picture p2">
      <MyTable v-bind:rawData="this.answers" :class="post.id+1"></MyTable>
    </div>
  </el-card>
</template>
<script>
import MyChart from "../components/DataAnalysis/MyChart.vue";
import MyTable from "../components/DataAnalysis/MyTable.vue";
export default {
  data() {
    return {
      answers: []
      // getpost:post,
      // datas:[
      //         // 填充统计结果
      //         // { value: 235, name: "AA" },
      //         // { value: 274, name: "BB" },

      //   ]
    };
  },
  mounted() {
    document.getElementsByClassName(this.post.id + 1)[0].style.display = "none";
    document.getElementsByClassName(this.post.id + 1)[1].style.display = "none";
    var b = [];
    for (var i = 0; i < this.post.totalquantity; i++) {
      var a = { value: 0, name: "" };
      a.value = i + 1;
      a.name = this.post.allanswers[i];
      b.push(a);
    }
    this.answers = b;
  },
  computed: {
    datas: function() {
      var a = [];
      for (let item of Object.keys(this.post.answers)) {
        var b = { value: 0, name: "" };
        b.name = this.post.answers[item].option;
        var c = this.post.answers[item].quantity / this.post.totalquantity;
        b.value = Math.floor(c * 100) / 100;
        a.push(b);
      }
      return a;
    }
  },
  methods: {
    //     toPercent(point){
    //     var str=Number(point*100).toFixed(1);
    //     str+="%";
    //     return str;
    // },
    showp1(id) {
      if (
        document.getElementsByClassName("p1")[id].style.minHeight == "100px"
      ) {
        document.getElementsByClassName("p1")[id].style.height = "0";
        document.getElementsByClassName("p1")[id].style.minHeight = "0px";
        document.getElementsByClassName(this.post.id + 1)[0].style.display =
          "none";
      } else {
        document.getElementsByClassName("p1")[id].style.minHeight = "100px";
        document.getElementsByClassName("p1")[id].style.height = "100%";
        document.getElementsByClassName(this.post.id + 1)[0].style.display =
          "block";
      }
    },
    showp2(id) {
      if (
        document.getElementsByClassName("p2")[id].style.minHeight == "100px"
      ) {
        document.getElementsByClassName("p2")[id].style.height = "0px";
        document.getElementsByClassName("p2")[id].style.minHeight = "0px";
        document.getElementsByClassName(this.post.id + 1)[1].style.display =
          "none";
      } else {
        document.getElementsByClassName("p2")[id].style.minHeight = "100px";
        document.getElementsByClassName("p2")[id].style.height = "100%";
        document.getElementsByClassName(this.post.id + 1)[1].style.display =
          "block";
      }
    }
  },
  props: ["post"],
  components: {
    MyChart,
    MyTable
  }
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 15px;
  margin-top: 15px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.header {
  width: 100%;
  text-align: left;
  padding-left: 10px;
}
.box-card {
  width: 100%;
}
.title {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.baifenbi {
  width: 28px;
  overflow: hidden;
}
.el-card {
  margin-bottom: 15px;
}
.buttons {
  display: flex;
  justify-content: left;
}
.picture {
  width: 100%;
  height: 0px;
  min-height: 0px;
  /* background-color: aqua; */
  margin-top: 20px;
  transition: all 0.3s;
  /* display: none */
}
</style>